<template>
  <div id="detail_h">
    <div class="top"></div>
    <div class="content">
      {{ goods_a }}
    </div>
    <div class="bottom"></div>
    <p>穿着效果</p>
  </div>
</template>

<script>
export default {
  name: "Detail_hodong",
  props: {
    goods_a: {
      type: String,
      default: "",
    },
  },
}
</script>

<style lang="less" scoped>
#detail_h {
  display: flex;
  flex-direction: column;
  padding: 17px 7px;
  .top,
  .bottom {
    position: relative;
    width: 30%;
    height: 1px;
    background-color: #a3a3a5;
  }
  .bottom {
    align-self: flex-end;
  }
  .bottom::after,
  .top::after {
    position: absolute;
    top: -3px;
    display: block;
    content: "";
    width: 4px;
    height: 4px;
    background-color: black;
  }
  .bottom::after {
    right: 0;
  }
  .top::after {
    left: 0;
  }
  .content {
    padding: 13px 5px;
    color: #666666;
    font-size: 12px;
  }
  p {
    margin: 8px 12px;
    font-size: 12px;
  }
}
</style>
